<style scoped >
    .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 150px;
        padding-bottom: 200px;
        /*background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));*/
        /*background: #fff;*/
        /*url(http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2014/03/free-blurred-web-backgrounds-04.jpg);*/
    }
    .wrapper > h1{
        text-align: center;
        vertical-align: middle;
        margin-bottom: 20px;
        color: #000;
    }
    .login {
        margin: 0 auto;
        padding: 200px auto;
        width: 200px;
        height: 100%;
    }
    /*底部*/
    .layout-footer{
        width: 100%;
        text-align: center;
        line-height: 54px;
        text-align: center;
        position: absolute;
        bottom: 0;
        background: #ecf1f2;
    }
    /*底部*/
</style>
<template>
    <div class="console-product">
        <Row type="flex">
            <i-col :span="spanLeft" class="layout-menu-left" v-show="show">
                <logistics-navbar></logistics-navbar>
            </i-col>
            <i-col :span="spanRight">
                <div class="layout-header">
                    <Row type="flex">
                        <i-col :span="1" >
                            <i-button type="text" @click="toggleClick">
                                <Icon type="navicon" size="32"></Icon>
                            </i-button>
                        </i-col>
                        <i-col :span="23" >
                            <Breadcrumb>
                                <Breadcrumb-item href="#">首页</Breadcrumb-item>
                                <Breadcrumb-item href="#">应用中心</Breadcrumb-item>
                                <Breadcrumb-item>某应用</Breadcrumb-item>
                            </Breadcrumb>
                        </i-col>
                    </Row>
                </div>
                <div class="console-product-body">
                    <router-view></router-view>
                </div>
                <div class="layout-footer">
                    2017  © 库特智能股份有限公司
                </div>
            </i-col>
        </Row>
    </div>
</template>
<script>
    import LogisticsNavbar from './logistics/logistics-navbar';
    import ICol from "../../node_modules/iview/src/components/grid/col";
    export default {
        data () {
            return {
                spanLeft: 3,
                spanRight: 21,
                show:true,
            }
        },
        components: {
            ICol, LogisticsNavbar
        },
        created: function () {
            $(".console-body").css({top:70})
        },
        methods: {
            toggleClick () {
                this.show = !this.show;
                if (this.spanLeft === 3) {
                    this.spanLeft = 0;
                    this.spanRight = 24;
                } else {
                    this.spanLeft = 3;
                    this.spanRight = 21;
                }
            }
        }
    }
</script>